<template>
  <view class="content">
    <u-sticky bgColor="#fff">
      <u-tabs :list="tabList" lineColor="#FD9618" :activeStyle="{ color: '#FD9618' }"
              :itemStyle="{ width: '33.33%', height: '40px' }" @click="tabClick"></u-tabs>
    </u-sticky>
    <view class="mainBox">
      <mescroll-body @init="mescrollInit" @down="downCallback" @up="getListData">
        <view class="scroll-container">
          <view class="list" v-for="item in dataList" :key='item.reserveId'>
            <view class="liTop flex">
              <view class="name flex-1 line1">{{ item.roomHouseName }}</view>
              <view class="status">
                <text class="yellow">{{ item.paymentStatus }}</text>
                <!-- <text class="red">已取消</text>
                <text class="green">已支付</text> -->
              </view>
            </view>
            <view class="liCen">{{ item.roomHouseTypeName }} | {{ item.space }} ㎡</view>
            <view class="liCen">预计入住时间:
              <uni-dateformat format='yyyy/MM/dd'
                              :date="item.checkInDate"></uni-dateformat>
            </view>
            <view class="liCen">创建日期:
              <uni-dateformat
                  :date="item.createTime"></uni-dateformat>
            </view>
            <view class="liCen">预定备注: {{ item.remark }}</view>
            <view class="liBtm">
              <view class="li flex">
                <view class="tit">预定金:</view>
                <view class="txt flex-1 text-right">{{ item.deposit }}元</view>
              </view>
              <view class="li liLast flex">
                <view class="tit yellow text-32rpx">合计:</view>
                <view class="txt flex-1 text-right yellow text-32rpx">{{ item.deposit }} 元</view>
              </view>
            </view>
            <!-- 					<u-button v-show="item.paymentStatus == '待支付'" text="立即支付" type="primary" class="btn"
                        @click="getdatail(item)"></u-button> -->
            <view v-show="item.paymentStatus == '待支付'" class="text-btn" @click="getdatail(item)">
              立即支付
            </view>
          </view>
        </view>
      </mescroll-body>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue'
import {
  getMyReserve
} from "@/common/API/depositList.ts"
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll";
import {onLoad, onPageScroll, onUnload, onReachBottom} from "@dcloudio/uni-app"

const {mescrollInit, downCallback} = useMescroll(onPageScroll, onReachBottom)
const tabList = ref([
  {
    name: '全部',
    payState: 0
  },
  {
    name: '待支付',
    payState: 1
  },
  {
    name: '已支付',
    payState: 2
  },
])
const reserveData = reactive({
  pageNum: 1,
  pageSize: 10,
  payState: 0,
  bookerPhone: null,
})
const dataList = ref([])
const flag = ref(false)
onLoad((options) => {
  if (options) {
    flag.value = options.flag
  }
})
onUnload(() => {
  if (!flag.value) {
    uni.switchTab({
      url: '/pages/personal/index',
    })
  }
})
const resetScroll = () => {
  dataList.value = [];
  downCallback()
}
const tabClick = (e) => {
  reserveData.payState = e.payState
  resetScroll()
}
const getListData = async (mescroll) => {
  const userPhone = uni.getStorageSync("userPhone")
  reserveData.bookerPhone = userPhone
  if (userPhone) {
    let data = {
      ...reserveData,
      pageNum: mescroll.num,
      pageSize: mescroll.size,
    }
    const res = await getMyReserve(data)
    const curPageData = res.list;
    const curPageLen = curPageData.length;
    if (mescroll.num == 1) dataList.value = [];
    dataList.value = dataList.value.concat(curPageData);
    mescroll.endSuccess(curPageLen);
  } else {
    mescroll.endSuccess(0);
  }
}
const getdatail = (item) => {
  uni.navigateTo({
    url: `/pages/personal/deposit/inform?img=${item.reserveNotify}&id=${item.reserveId}`
  })
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #fff;

  :deep(.u-sticky) {
    border-bottom: 2rpx solid #E5E5E5;

    .u-tabs__wrapper__nav__line {
      bottom: 0 !important;
    }
  }
}

.mainBox {
  .list {
    background: #fff;
    border-radius: 8rpx;
    margin: 0 0 32rpx;
    padding: 32rpx;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);

    &.yifu {
      background: url('#{$imgUrl}/icon/yifu.png') no-repeat 518rpx 40rpx;
      background-size: 128rpx 128rpx;
    }

    .liTop {
      margin-bottom: 14rpx;

      .name {
        font-size: 36rpx;
        line-height: 44rpx;
        color: #000;
      }

      .liTop {
        margin-bottom: 14rpx;

        .name {
          font-size: 36rpx;
          line-height: 44rpx;
          color: #000;
        }

        .status {
          line-height: 44rpx;
          color: #999;
          margin-left: 20rpx;
        }
      }

      .liCen {
        line-height: 48rpx;
        color: #999;
      }

      .liBtm {
        border-top: 2rpx solid #E5E5E5;
        margin-top: 12rpx;
        padding-top: 12rpx;

        .li {
          line-height: 44rpx;
          justify-content: space-between;
          display: flex;

          .tit {
            color: #999;
            line-height: 44rpx;
          }

          .txt {
            line-height: 44rpx;
          }

          .btn {
            text-align: right;
            font-size: 32rpx;
          }
        }

        .liLast {
          line-height: 64rpx;
          margin: 6rpx 0 0;
        }
      }

      .btn {
        width: 526rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 12rpx;
        margin-top: 30rpx;
      }
    }
  }
}

.scroll-container {
  width: 100%;
  padding: 24rpx 32rpx !important;
}

.text-btn {
  width: 600rpx;
  height: 84rpx;
  line-height: 84rpx;
  border-radius: 12rpx;
  background: rgba(253, 150, 24, 1);
  color: #fff;
  text-align: center;
}
</style>
